<template>
	<view>
		<navbar :config="config"></navbar>
		<view class="usable-integrate">
			<text class="usable-title">可用积分</text>
			<text class="usable-nums">{{ $addDecimals(integral_able , 8) }}</text>
		</view>
		<view class="box">
			<view class="box-content">
				<view class="usable-hint">
					<text>兑换余额</text>
					<!-- <service-charge title="兑换余额手续费为"></service-charge> -->
				</view>
				<view class="usable-input">
					<!-- <text class="iconfont3 usable-input-icon">&#xe619;</text> -->
					<!-- <text class="iconfont3 usable-hint-icon">&#xe619;</text> -->
					<image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/common/moneyIcon.png" style="width: 50rpx;height: 50rpx;margin-right: 10rpx;"></image>
					<u-input v-model="value" type="number" placeholder="请输入积分数量" :clearable="false"
						@blur="getPointToBalanceComputer" />
				</view>
				<view class="usable-hint-info">
					<!-- <view class="usable-hint-item">
						<text class="usable-hint-title">手续费（销毁）：</text>
						<text class="usable-hint-val">{{ result.handling_fee }}</text>
					</view> -->
					<view class="usable-hint-item">
						<text class="usable-hint-title">实际兑换积分：</text>
						<text class="usable-hint-val">{{ result.face_point }}</text>
					</view>
					<view class="usable-hint-item">
						<text class="usable-hint-title">可兑换金额：</text>
						<text class="usable-hint-val">{{ result.face_add_balance }} 元</text>
					</view>

					<view class="usable-hint-item usable-hint-error">
						{{ valueError ? '*积分数量不足，请重新输入' : '' }}
					</view>
				</view>
			</view>
			<view class="usable-btn" @click.stop="openHintPopup()">
				确认提交
			</view>
		</view>

		<exchange-hint ref="exchangeHint" :params="pointGiveAwayApi" :type="0" :useNums="value"
			:resultNum="`${result.face_add_balance}元`"></exchange-hint>
	</view>
</template>

<script>
	import {
		pointToBalanceComputer,
		pointToBalance
	} from "@/api/personal-center.js"
	export default {
		data() {
			return {
				pointGiveAwayApi: {
					url: pointToBalance,
					mode: 'post',
					data: {
						value: '',
						user_obj_id: ''
					}
				},
				value: '',
				valueError: false,
				resultNum: '999元',
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '兑换余额',
					color: '#FFFFFF',
					// autoBack:true,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FF721B"],
					statusBarFontColor: '#FFFFFF'
				},
				// 手续费 / 实际转赠
				result: {
					face_point: 0,
					handling_fee: 0,
					face_add_balance: 0
				}
			};
		},
		onShow() {
			this.getUserInfo()
		},
		watch: {
			value(newVal) {
				console.log('newVal = ', newVal)
				if (newVal.indexOf('.') != -1) {
					let arr = newVal.split('.')
					if (arr[1].length > 8) {
						this.value = Number(newVal).toFixed(8)
					}
				}
				if (newVal > this.integral_able) {
					this.valueError = true
				} else {
					this.valueError = false
				}
			}
		},
		methods: {
			//获取个人信息
			getUserInfo() {
				let personal = uni.getStorageSync('personal');
				this.integral_able = personal ? personal.integral_able : '';
			},
			getPointToBalanceComputer() {
				if (!this.value || this.valueError) {
					return false
				};
				this.$http.post(pointToBalanceComputer, {
					value: this.value
				}).then((res) => {
					if (res && res.code == 200) {
						this.result.face_point = res.data.face_point;
						this.result.handling_fee = res.data.handling_fee;
						this.result.face_add_balance = res.data.face_add_balance;
					};
				});
			},
			openHintPopup() {
				this.pointGiveAwayApi.data = {
					value: this.value
				}
				this.$refs.exchangeHint.open()
				// this.$refs.exchangeHint.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
	@import "~./common.scss";
</style>